<!--
  组件名称：
  -->
<template>
  <div class="sp-nav">
    <div class="sp-nav-item" :class="{ active: value === item[keyName] }" v-for="item in menu" :key="item[keyName]" @click="handleClick(item)">{{ item.name }}</div>
  </div>
</template>
<script>
export default {
  name: 'SpNav',
  props: {
    menu: {
      type: Array,
      default: () => []
    },
    keyName: {
      type: String,
      default: 'id'
    },
    value: {
      type: [Number, String],
      default: ''
    }
  },
  methods: {
    handleClick (item) {
      this.$emit('input', item[this.keyName])
    }
  }
}
</script>
<style lang="scss" scoped>
  .sp-nav {
    display: flex;
    align-items: center;
    border: 1px solid $--color-primary;
    color: $--color-primary;
    .sp-nav-item {
      flex: 1;
      text-align: center;
      font-size: 12px;
      padding: 4px 0;
      cursor: pointer;
      &.active {
        background-color: $--color-primary;
        color: #000000;
      }
    }
  }
</style>
